<template>
  <div class="box">
    <van-nav-bar
      title="地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-address-list
      v-model="chosenAddressId"
      :list="list1"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
    <van-popup
      v-model:show="showBottom"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-address-edit
        :address-info="addressinfo"
        :area-list="areaList"
        show-delete
        show-set-default
        
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { showToast } from "vant";
import { getress, address, setupdate ,setdelete} from "../../service/user";
export default {
  data() {
    return {
      addressinfo: {
        id: "",
        name: "",
        tel: "",
        address: "",
        isDefault:false,
      },
      showBottom: false,
      searchResult: [],
      areaList,
      num: 1,
      //地址列表
      list: [],
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
      chosenAddressId: 1,
    };
  },
  created() {
    this.getresslist();
  },
  //关闭表单时清楚表单上的数据
  beforeUpdate() {
    if (!this.showBottom) {
      this.addressinfo = {
        id: "",
        name: "",
        tel: "",
        address: "",
      };
    }
  },
  computed: {
    //映射 
    //返回数据兼容所用的vant组件
    list1() {
      return this.list.map((item) => {
        return {
          id: item.addressid,
          name: item.name,
          tel: item.tel,
          address: item.province + item.city + item.county + item.addressDetail,
          isDefault:item.isDefault,
        };
      });
    },
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    //点击保存时可以根据表单状态决定执行添加事件还是修改事件
    onSave(data) {
      showToast("save");
      console.log(data);
      if (this.num === 1) {
        address({
          userid: this.$store.state.userInfo.data.userid,
          name: data.name,
          tel: data.tel,
          province: data.province,
          city: data.city,
          county: data.county,
          addressDetail: data.addressDetail,
          isDefault: data.isDefault,
        }).then((res) => {
          console.log(res);
          if(res.data.code==="200"){
            this.getresslist();
             this.showBottom = false;
          }
        });
      } else {
        setupdate({
          addressid:data.id,
          userid: this.$store.state.userInfo.data.userid,
          name: data.name,
          tel: data.tel,
          province: data.province,
          city: data.city,
          county: data.county,
          addressDetail: data.addressDetail,
          isDefault: data.isDefault,
        }).then((res) => {
          if(res.data.code==="200"){
            this.getresslist();
             this.showBottom = false;
          }
         
        });
      }
    },
    //删除
    onDelete(data) {
      console.log(data)
      setdelete({addressid:data.id}).then((res)=>{
        if(res.data.code==="200"){
            this.getresslist();
             this.showBottom = false;
          }
      })
    },
    //默认详细地址
    /*  */onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    //获取地址列表
    getresslist() {
      getress(this.$store.state.userInfo.data.userid).then((res) => {
        if ((res.data.code = "200")) {
          console.log(res);
          this.list = res.data.data;
        }
      });
    },
    //显示表单
    onAdd() {
      showToast("新增地址");
      this.showBottom = true;
      this.num = 1;
    },
    //点击编辑时获取点击对象,并将对象的值赋给表单初始数据
    onEdit(item, index) {
      showToast("编辑地址:" + index);
      this.list.forEach((item1) => {
        if (item1.addressid === item.id) {
          this.addressinfo = {
            id: item1.addressid,
            name: item1.name,
            tel: item1.tel,
            city: item1.city,
            county: item1.county,
            addressDetail: item1.addressDetail,
            areaCode: item1.areaCode,
            isDefault: item1.isDefault,
          };
        }
      });
      console.log(item);
      this.showBottom = true;
      this.num = 2;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
  height: 100vh;
  span {
    font-size: 14px;
    margin: 10px;
  }
}
</style>
